@inject('cate','App\Models\Category')
@php
    $childrens=collect();//保存所有二级栏目
    $cate=$cate->where('pid',0)->where('homeshow',true)->get();//获取所有一级栏目
    foreach($cate as $key=>$item){
        $childrens->push($item->childrens);
    }
@endphp
@foreach($cate as $c)
    @foreach($c->childrens as $child)
        @if($child->homeshow==true)
            @switch($child->structure)
                @case(1)
                {{--                4乘X圆图结构--}}
                <div class="service g_mt g_mb">
                    <div class="g_title">
                        <p class="p1">{{$child->title}}</p>
                        <p class="p2"><span class="title">{{$child->name}}</span></p>
                    </div>
                    <div class="g_cw">
                        <div class="brief" style="margin-top:16px;text-align:center;">
                            <p> {{$child->description}} </p>
                        </div>
                        <div class="se_list">
                            <ul class="list">
                                @foreach($child->contents->take(4) as $content)
                                    <li><a href="{{route('content',$content)}}">
                                            <p class="pic"><img class="g_imgf se_ct"
                                                                src="{{$content->preview}}"
                                                                style="width:213px;height:213px;">
                                                <img class="ico" src="/templates/default/se_tb1.svg">
                                            </p>
                                            @if($content->top)
                                                <p class="l1 flex justify-center">
                                                    <svg class="w-6 h-6 text-red-600" fill="none" stroke="currentColor"
                                                         viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                                                        <path stroke-linecap="round" stroke-linejoin="round"
                                                              stroke-width="2"
                                                              d="M17.657 18.657A8 8 0 016.343 7.343S7 9 9 10c0-2 .5-5 2.986-7C14 5 16.09 5.777 17.656 7.343A7.975 7.975 0 0120 13a7.975 7.975 0 01-2.343 5.657z"></path>
                                                        <path stroke-linecap="round" stroke-linejoin="round"
                                                              stroke-width="2"
                                                              d="M9.879 16.121A3 3 0 1012.015 11L11 14H9c0 .768.293 1.536.879 2.121z"></path>
                                                    </svg>

                                                    {{$content->title}}
                                                </p>
                                            @else
                                                <p class="l1">{{$content->title}}</p>
                                            @endif
                                            <p class="l2">{{$content->description}}</p>
                                        </a></li>
                                @endforeach
                            </ul>
                        </div>
                    </div>
                </div>
                <div class="flex justify-center items-center">
                    <a href="{{route('category',$child)}}" class="border
                    transition duration-200 text-white ease-in-out  hover:text-gray-800 transform hover:-translate-y-1 hover:scale-110
                    px-4  py-2"
                       style="background:#00a799;">MORE >>
                    </a>
                </div>
                @break
                {{--                3乘X文字结构--}}
                @case(2)
                <div class="news g_mt g_mb">
                    <div class="g_title">
                        <p class="p1">{{$child->title}}</p>
                        <p class="p2"><span class="title">{{$child->name}}</span></p>
                    </div>
                    <div class="g_cw">
                        <div class="brief" style="margin-top:16px;text-align:center;">
                            <p>{{$child->description}}</p>
                        </div>
                        <div class="mt-3">
                            <ul>
                                <div class="grid grid-cols-3 gap-4">
                                    @foreach($child->contents->take(4) as $content)
                                        <a href="{{route('content',$content)}}" class=" w-100 h-100">
                                            <div class="pt-6 ">
                                                <div
                                                    class="inline-block bg-gray-50 w-full hover:shadow-lg rounded-lg px-6 pb-8">
                                                    <div class="-mt-6 h-56">
                                                        <div class="">
                    <span class="inline-flex items-center justify-center p-3 bg-green-500 rounded-md shadow-lg">

                        <img class="w-10 h-10"
                             src=""/>
                    </span>
                                                        </div>
                                                        <h3 class="mt-4 text-xl  font-medium text-gray-900 tracking-tight">
                                                            @if($content->top)
                                                                <p class="l1 flex justify-center">
                                                                    <svg class="w-6 h-6 text-red-600" fill="none"
                                                                         stroke="currentColor"
                                                                         viewBox="0 0 24 24"
                                                                         xmlns="http://www.w3.org/2000/svg">
                                                                        <path stroke-linecap="round"
                                                                              stroke-linejoin="round"
                                                                              stroke-width="2"
                                                                              d="M17.657 18.657A8 8 0 016.343 7.343S7 9 9 10c0-2 .5-5 2.986-7C14 5 16.09 5.777 17.656 7.343A7.975 7.975 0 0120 13a7.975 7.975 0 01-2.343 5.657z"></path>
                                                                        <path stroke-linecap="round"
                                                                              stroke-linejoin="round"
                                                                              stroke-width="2"
                                                                              d="M9.879 16.121A3 3 0 1012.015 11L11 14H9c0 .768.293 1.536.879 2.121z"></path>
                                                                    </svg>

                                                                    {{$content->title}}
                                                                </p>
                                                            @else
                                                                <p class="l1">{{$content->title}}</p>
                                                            @endif
                                                        </h3>
                                                        <p class="mt-2 text-lg text-gray-500 text-justify">
                                                            {{$content->description}}
                                                        </p>
                                                    </div>
                                                </div>
                                            </div>
                                        </a>
                                    @endforeach

                                </div>

                            </ul>
                        </div>
                    </div>
                </div>
                <div class="flex justify-center items-center">
                    <a href="{{route('category',$child)}}" class="border
                    transition duration-200 text-white ease-in-out  hover:text-gray-800 transform hover:-translate-y-1 hover:scale-110
                    px-4  py-2"
                       style="background:#00a799;">MORE >>
                    </a>
                </div>
                @break
                {{--                左图右4标题结构--}}
                @case(3)
                <div class="advantage g_mt g_mb">
                    <div class="g_title">
                        <p class="p1">{{$child->title}}</p>
                        <p class="p2"><span class="title">{{$child->name}}</span></p>
                    </div>
                    <div class="brief" style="margin-top:16px;text-align:center;">
                        <p></p>
                    </div>
                    <div class="mode">

                        <div class="g_cw">

                            <div class="left"><img class="g_imgf"
                                                   src="/static/images/cardpreview.png" style="z-index:-1;">
                            </div>
                            <div class="right">
                                <ul class="list">
                                    @foreach($child->contents->take(4) as $content)
                                        <li><a href="{{route('content',$content)}}">
                                                <p class="ico" style="background:#00a799;"><img
                                                        class="ad_ico"
                                                        src="/static/images/ad_0{{$loop->iteration}}.svg"
                                                        style="margin-top:12px;margin-left:12px;"
                                                        width="40"></p>
                                                <p class="l1" style="color:#00a799;">
                                                @if($content->top)
                                                    <p class="l1 flex justify-center">
                                                        <svg class="w-6 h-6 text-red-600" fill="none"
                                                             stroke="currentColor"
                                                             viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                                                            <path stroke-linecap="round" stroke-linejoin="round"
                                                                  stroke-width="2"
                                                                  d="M17.657 18.657A8 8 0 016.343 7.343S7 9 9 10c0-2 .5-5 2.986-7C14 5 16.09 5.777 17.656 7.343A7.975 7.975 0 0120 13a7.975 7.975 0 01-2.343 5.657z"></path>
                                                            <path stroke-linecap="round" stroke-linejoin="round"
                                                                  stroke-width="2"
                                                                  d="M9.879 16.121A3 3 0 1012.015 11L11 14H9c0 .768.293 1.536.879 2.121z"></path>
                                                        </svg>

                                                        {{$content->title}}
                                                    </p>
                                                @else
                                                    <p class="l1">{{$content->title}}</p>
                                                    @endif
                                                    </p>
                                                    <p class="l2">{{$content->description}} </p>
                                            </a></li>
                                    @endforeach
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="flex justify-center items-center">
                    <a href="{{route('category',$child)}}" class="border
                    transition duration-200 text-white ease-in-out  hover:text-gray-800 transform hover:-translate-y-1 hover:scale-110
                    px-4  py-2"
                       style="background:#00a799;">MORE >>
                    </a>
                </div>
                @break
                {{--                3乘X相册结构--}}
                @case(4)
                <div class="service_advantage my-8">
                    <div class="g_title">
                        <p class="p1">{{$child->title}}</p>
                        <p class="p2"><span class="title">{{$child->name}}</span></p>
                        <div class="brief" style="margin-top:16px;text-align:center;">
                            <p>{{$child->description}}</p>
                        </div>
                    </div>
                    <div class="g_cw">
                        <div class="lt">
                            <ul class="grid grid-cols-3 gap-4">
                                @foreach($child->contents->take(6) as $content)
                                    <li class="my-5 hover:text-green-500 shadow-md">
                                        <a href="{{route('content',$content)}}"
                                           class="flex flex-col justify-center items-center">
                                            <img class="" src="{{$content->preview}}" style="width:348px;height:233px;">
                                            <p class="my-3">{{\Str::limit($content->title,20,'...')}}</p>
                                        </a>
                                    </li>
                                @endforeach
                            </ul>
                        </div>
                    </div>
                </div>
                <div class="flex justify-center items-center my-8">
                    <a href="{{route('category',$child)}}" class="border
                    transition duration-200 text-white ease-in-out  hover:text-gray-800 transform hover:-translate-y-1 hover:scale-110
                    px-4  py-2"
                       style="background:#00a799;">MORE >>
                    </a>
                </div>

                @break
                @case(5)
                {{--                方形图文结构--}}
                <div class="news_home">
                    <div class="g_cw">
                        <div class="lt">
                            <ul class="list">
                                @foreach($child->contents->take(4) as $content)
                                    <li><a class="box" href="#">
                                            <div class="title_b">
                                                <p class="p1">
                                                @if($content->top)
                                                    <p class="l1 flex justify-center">
                                                        <svg class="w-6 h-6 text-red-600" fill="none"
                                                             stroke="currentColor"
                                                             viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                                                            <path stroke-linecap="round" stroke-linejoin="round"
                                                                  stroke-width="2"
                                                                  d="M17.657 18.657A8 8 0 016.343 7.343S7 9 9 10c0-2 .5-5 2.986-7C14 5 16.09 5.777 17.656 7.343A7.975 7.975 0 0120 13a7.975 7.975 0 01-2.343 5.657z"></path>
                                                            <path stroke-linecap="round" stroke-linejoin="round"
                                                                  stroke-width="2"
                                                                  d="M9.879 16.121A3 3 0 1012.015 11L11 14H9c0 .768.293 1.536.879 2.121z"></path>
                                                        </svg>

                                                        {{$content->title}}
                                                    </p>
                                                @else
                                                    <p class="l1">{{$content->title}}</p>
                                                    @endif
                                                    </p>
                                                    <em>{{$content->created_at}}</em></div>
                                            <div class="mode">
                                                <p class="pic"
                                                   style=" background:url({{$content->preview}}) no-repeat center center; background-size:cover; height:150px;"></p>
                                                {{--                                                <p class="p2">{{\Str::limit($content->content, 30, '...')}}</p>--}}
                                                <p class="p2"> {{\Str::limit(strip_tags($content->content))}} </p>
                                                <em class="me">[详情]</em></div>
                                        </a></li>
                                @endforeach
                            </ul>
                        </div>

                    </div>
                </div>
            @endswitch

        @endif
    @endforeach
@endforeach

